feat: Add copy json config button #334

sumeetpardeshi · 2025-04-19T01:40:48Z

Added a copy config button, to copy the json config for the server currently being tested.

Motivation and Context

Currently when we are adding configs to mcp.json configuration for any client(eg. cursor), we need to manually copy the command, args and env variable. Idea is to improve UX and provide a quick copy button, which when clicked will have the config ready in clipboard to be pasted in mcp.json file. we also show a toast when the values are copied to clipboard.

this config will be copied to clipboard when testing uvx mcp-server-fetch
{ "command": "uvx", "args": [ "mcp-server-fetch" ], "env": { "YOUR_ENV_VARIABLES": "VALUE" } }

so the Idea is in an existing mcp.json file, you will add this server config from clipboard as below:

{ "mcpServers": { "your-server-name": <paste-copied-config-here> } }

How Has This Been Tested?

Tested locally by connecting to a mcp-server-fetch server

Breaking Changes

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)
Documentation update

Checklist

I have read the MCP Documentation
My code follows the repository's style guidelines
New and existing tests pass locally
I have added appropriate error handling
I have added or updated documentation as needed

Additional context

olaservo

Thanks for the PR, I like the idea of making this more convenient. I think we should make some of this more generic though, rather than assuming we can use the Cursor format.

Another thing to take a look at is the recent support added for using a config file with inspector, mentioned here under the table: https://github.com/modelcontextprotocol/inspector?tab=readme-ov-file#configuration

I'm thinking that another way to avoid the UI edit -> partial config copy/paste process might be to edit a config file instead, and then just refer to that same config for your client and Inspector?

cliffhall · 2025-05-01T20:19:51Z

Thanks for the PR, I like the idea of making this more convenient. I think we should make some of this more generic though, rather than assuming we can use the Cursor format.

Another thing to take a look at is the recent support added for using a config file with inspector, mentioned here under the table: https://github.com/modelcontextprotocol/inspector?tab=readme-ov-file#configuration

I think the format that's listed above matches our config file format:

Suggestion

Our format

I'm thinking that another way to avoid the UI edit -> partial config copy/paste process might be to edit a config file instead, and then just refer to that same config for your client and Inspector?

That seems like a good plan, but I'm sure the copy and paste could still be useful.

Maybe, since this gaping hole exists in the UI...

... we could put two buttons: Copy Config File and Copy Config Entry

Copy Config File would copy a whole config file shape with just the currently connected server in it,
Copy Config Entry would give you an entry for such a file.

sumeetpardeshi · 2025-05-01T20:28:53Z

@cliffhall thanks for the inputs here, appreciate the help. I too validated that most clients have same format for mcp.json , so @olaservo your query should also be resolved with that.

I will go ahead and add those 2 buttons and update the PR.

…me tooltip and optimizations.

sumeetpardeshi · 2025-05-01T22:46:44Z

Added 2 buttons:

Config Entry
Config File

Note: Ignored the Copy Prefix suggested above as its causing UI to overflow when both buttons on same line. to compensate added appropriate icons and tooltips for clear understanding though.

cliffhall · 2025-05-02T20:19:42Z

@sumeetpardeshi Can we make the buttons take up the whole space?

sumeetpardeshi · 2025-05-03T03:12:19Z

@cliffhall, now buttons take up the whole space.

cliffhall

@sumeetpardeshi Looking good. A couple things, though.

Changes

Add tests in Sidebar.test.tsx
Add some explanation of this functionality in README.md.

Are we sure 'Config' is the right name here?

Since we have a Configuration button just below these new buttons, one might think that it would copy all of those values as well, but it does not. That's because the mcp.json files used by other clients, and our own configuration settings are two separate things. We have to disambiguate.

The easiest way to do that would be to rename these buttons.

Server Entry & Servers File perhaps?

sumeetpardeshi · 2025-05-05T21:21:06Z

@cliffhall I agree with your point of calling it Server Entry & Servers File to avoid confusion.
next steps:

Change references and button names as suggested.
add test cases for this feature
The image(mcp-inspector.png) also needs to update to include these new buttons in sidebar.

cliffhall · 2025-05-05T21:36:31Z

@cliffhall I agree with your point of calling it Server Entry & Servers File to avoid confusion. next steps:

Change references and button names as suggested.

add test cases for this feature

The image(mcp-inspector.png) also needs to update to include these new buttons in sidebar.

And a section of the README that explains what these buttons do and what the copied data is for.

- change button names - adding unit test cases - updated landing page image - updating README file as discussed here: modelcontextprotocol#334 (comment)

cliffhall

A few requests...

cliffhall · 2025-05-06T14:48:21Z

README.md

@@ -42,6 +42,74 @@ CLIENT_PORT=8080 SERVER_PORT=9000 npx @modelcontextprotocol/inspector node build

 For more details on ways to use the inspector, see the [Inspector section of the MCP docs site](https://modelcontextprotocol.io/docs/tools/inspector). For help with debugging, see the [Debugging guide](https://modelcontextprotocol.io/docs/tools/debugging).

+### Configuration Export


It would be best to avoid the word Configuration here because, as with the button naming, we need to disambiguate "Configuration" vs "MCP Server File", since our app's configuration is not this configuration for other apps.

Suggested change

### Configuration Export

Servers File Export

cliffhall · 2025-05-06T14:50:16Z

README.md

@@ -42,6 +42,74 @@ CLIENT_PORT=8080 SERVER_PORT=9000 npx @modelcontextprotocol/inspector node build

 For more details on ways to use the inspector, see the [Inspector section of the MCP docs site](https://modelcontextprotocol.io/docs/tools/inspector). For help with debugging, see the [Debugging guide](https://modelcontextprotocol.io/docs/tools/debugging).

+### Configuration Export
+
+The MCP Inspector provides convenient buttons to export your server configuration:


Suggested change

The MCP Inspector provides convenient buttons to export your server configuration:

The MCP Inspector provides convenient buttons to export server launch configurations for use in clients such as Cursor, Claude Code, or the Inspector's CLI. The file us usually called `mcp.json`.

Just want it to be clear that the Inspector UI itself isn't currently using mcp.json (though perhaps we should consider it).

Inspector does support using a JSON file as of the update to add CLI mode, so we should align the wording and naming there so they don't diverge too much: https://github.com/modelcontextprotocol/inspector/blob/main/README.md#configuration

The inspector also supports configuration files to store settings for different MCP servers. This is useful when working with multiple servers or complex configurations:

npx @modelcontextprotocol/inspector --config path/to/config.json --server everything

Inspector does support using a JSON file as of the update to add CLI mode, so we should align the wording and naming there so they don't diverge too much: https://github.com/modelcontextprotocol/inspector/blob/main/README.md#configuration

The inspector also supports configuration files to store settings for different MCP servers. This is useful when working with multiple servers or complex configurations:

npx @modelcontextprotocol/inspector --config path/to/config.json --server everything

@olaservo I honestly haven't focused enough on the CLI. The file is the same format. We should consider using it on the UI as well. For now I updated the suggestion above to include the Inspector's CLI.

Just to clarify, UI mode can use the config file too, you just need to pass the flag like I showed in this example: #349

cliffhall · 2025-05-06T14:59:25Z

README.md

@@ -93,6 +161,8 @@ Example server configuration file:
 }
 ```

+> **Tip:** You can easily generate this configuration format using the **Server Entry** and **Servers File** buttons in the Inspector UI, as described in the Configuration Export section above.


Suggested change

> **Tip:** You can easily generate this configuration format using the **Server Entry** and **Servers File** buttons in the Inspector UI, as described in the Configuration Export section above.

> **Tip:** You can easily generate this configuration format using the **Server Entry** and **Servers File** buttons in the Inspector UI, as described in the Servers File Export section above.

cliffhall · 2025-05-06T15:04:40Z

client/src/components/Sidebar.tsx

+            setCopiedServerFile(false);
+          }, 2000);
+        })
+        .catch((error) => {


is this catch necessary? It does the same thing as the catch for the surrounding try block.

@cliffhall idea was:

The outer catch handles synchronous errors

The inner catch handles asynchronous Promise rejections
if we only keep the outer catch, promise rejection from clipboard activity might not be caught in external synchronous catch. one option can be to covert inner cliboard call into await style sync and then have only single catch.
let me know what you think on this

cliffhall · 2025-05-06T15:07:26Z

mcp-inspector.png

Could you merge main into your branch and take this screenshot again? Also, from the docs above, I gather it wasn't tested with streamableHttp, only stdio and sse. Those should be updated as well.

sumeetpardeshi · 2025-05-06T23:50:17Z

@cliffhall I've addressed all the suggestions mentioned above

feat: add copy config button

114df8a

olaservo reviewed Apr 29, 2025

View reviewed changes

cliffhall added enhancement New feature or request waiting on submitter Waiting for the submitter to provide more info labels May 1, 2025

adding two buttons for configs: copy entry, copy file. also adding so…

163356f

…me tooltip and optimizations.

sumeetpardeshi requested a review from olaservo May 1, 2025 22:47

buttons take up whole width

e8e2dd0

cliffhall requested changes May 5, 2025

View reviewed changes

changes:

be7fa9b

- change button names - adding unit test cases - updated landing page image - updating README file as discussed here: modelcontextprotocol#334 (comment)

sumeetpardeshi requested a review from cliffhall May 6, 2025 00:32

cliffhall requested changes May 6, 2025

View reviewed changes

sumeetpardeshi added 4 commits May 6, 2025 16:08

changing the readme for clarity based on PR review comments

bf402e5

Merge branch 'main' of https://github.com/modelcontextprotocol/inspector

fef3748

fixing consolidating hook after merging with main

549a4ec

updating image after merging latest main

af27fa2

sumeetpardeshi requested a review from cliffhall May 6, 2025 23:50

fixing test cases after main merged

2b963ce

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add copy json config button #334

feat: Add copy json config button #334

sumeetpardeshi commented Apr 19, 2025

olaservo left a comment

cliffhall commented May 1, 2025 •

edited

Loading

sumeetpardeshi commented May 1, 2025

sumeetpardeshi commented May 1, 2025 •

edited

Loading

cliffhall commented May 2, 2025

sumeetpardeshi commented May 3, 2025

cliffhall left a comment •

edited

Loading

sumeetpardeshi commented May 5, 2025

cliffhall commented May 5, 2025 •

edited

Loading

cliffhall left a comment •

edited

Loading

cliffhall May 6, 2025

cliffhall May 6, 2025 •

edited

Loading

cliffhall May 6, 2025 •

edited

Loading

olaservo May 6, 2025

cliffhall May 6, 2025 •

edited

Loading

olaservo May 6, 2025 •

edited

Loading

cliffhall May 6, 2025

cliffhall May 6, 2025

sumeetpardeshi May 6, 2025

cliffhall May 6, 2025

sumeetpardeshi commented May 6, 2025

		@@ -42,6 +42,74 @@ CLIENT_PORT=8080 SERVER_PORT=9000 npx @modelcontextprotocol/inspector node build

		For more details on ways to use the inspector, see the [Inspector section of the MCP docs site](https://modelcontextprotocol.io/docs/tools/inspector). For help with debugging, see the [Debugging guide](https://modelcontextprotocol.io/docs/tools/debugging).

		### Configuration Export

	The MCP Inspector provides convenient buttons to export your server configuration:
	The MCP Inspector provides convenient buttons to export server launch configurations for use in clients such as Cursor, Claude Code, or the Inspector's CLI. The file us usually called `mcp.json`.

	> Tip: You can easily generate this configuration format using the Server Entry and Servers File buttons in the Inspector UI, as described in the Configuration Export section above.
	> Tip: You can easily generate this configuration format using the Server Entry and Servers File buttons in the Inspector UI, as described in the Servers File Export section above.

feat: Add copy json config button #334

Are you sure you want to change the base?

feat: Add copy json config button #334

Conversation

sumeetpardeshi commented Apr 19, 2025

Motivation and Context

How Has This Been Tested?

Breaking Changes

Types of changes

Checklist

Additional context

olaservo left a comment

Choose a reason for hiding this comment

cliffhall commented May 1, 2025 • edited Loading

Suggestion

Our format

sumeetpardeshi commented May 1, 2025

sumeetpardeshi commented May 1, 2025 • edited Loading

cliffhall commented May 2, 2025

sumeetpardeshi commented May 3, 2025

cliffhall left a comment • edited Loading

Choose a reason for hiding this comment

Changes

Are we sure 'Config' is the right name here?

sumeetpardeshi commented May 5, 2025

cliffhall commented May 5, 2025 • edited Loading

cliffhall left a comment • edited Loading

Choose a reason for hiding this comment

cliffhall May 6, 2025

Choose a reason for hiding this comment

cliffhall May 6, 2025 • edited Loading

Choose a reason for hiding this comment

cliffhall May 6, 2025 • edited Loading

Choose a reason for hiding this comment

olaservo May 6, 2025

Choose a reason for hiding this comment

cliffhall May 6, 2025 • edited Loading

Choose a reason for hiding this comment

olaservo May 6, 2025 • edited Loading

Choose a reason for hiding this comment

cliffhall May 6, 2025

Choose a reason for hiding this comment

cliffhall May 6, 2025

Choose a reason for hiding this comment

sumeetpardeshi May 6, 2025

Choose a reason for hiding this comment

cliffhall May 6, 2025

Choose a reason for hiding this comment

sumeetpardeshi commented May 6, 2025

cliffhall commented May 1, 2025 •

edited

Loading

sumeetpardeshi commented May 1, 2025 •

edited

Loading

cliffhall left a comment •

edited

Loading

cliffhall commented May 5, 2025 •

edited

Loading

cliffhall left a comment •

edited

Loading

cliffhall May 6, 2025 •

edited

Loading

cliffhall May 6, 2025 •

edited

Loading

cliffhall May 6, 2025 •

edited

Loading

olaservo May 6, 2025 •

edited

Loading